<template>
  <div class="app-container customer-div">
    <div style="margin-top: 20px">
      <!--搜索-->
      <el-form :inline="true" :model="listQuery" size="mini" label-width="120px">
        <el-form-item label="客户名称：">
          <el-autocomplete
            clearable
            class="inline-input"
            value-key="customerName"
            :fetch-suggestions="querySearch"
            v-model="listQuery.customerName"
            placeholder="请输入内容"
            @select="handleSelectCustomerName"
            :trigger-on-focus="false"
          ></el-autocomplete>
        </el-form-item>
        <el-form-item label="客户编号：" label-width="150px">
          <el-input v-model="listQuery.customerNumber" clearable class="input-width" style="width:195px"></el-input>
        </el-form-item>

        <el-form-item label="负责人：">
          <el-select v-model="listQuery.userId" filterable placeholder="请选择" clearable>
            <el-option
              v-for="item in userOptionList"
              :key="item.userId"
              :label="item.userName"
              :value="item.userId">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="申请时间：">
          <el-date-picker
            v-model="listQuery.createTime"
            type="daterange"
            format="yyyy 年 MM 月 dd 日"
            value-format="yyyy-MM-dd"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期">
          </el-date-picker>
        </el-form-item>

         <el-form-item label="审核状态：">
        <el-select v-model="listQuery.applyState" class="input-width" style="width:195px" placeholder="请选择" clearable>
          <el-option value="0" label="待审核" key="0"></el-option>
          <el-option value="1" label="已审核" key="1"></el-option>
          <el-option value="2" label="已拒绝" key="2"></el-option>
        </el-select>
      </el-form-item>
        <el-form-item>
          <el-button @click="handleSearchList()" type="primary">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
  <div class="table-container">
    <el-table
      v-loading="listLoading"
      :data="tableData"
      border
      style="width: 100%; margin-top: 20px">
      <el-table-column
        label="客户名称"
        min-width="300">
        <template slot-scope="scope">
            <el-link @click="toDetail(scope.row)" type="primary">
              {{scope.row.customerNumber}}
            </el-link>
            <!--是否有权限-->
            <div v-if="scope.row.isShowCustomerName" style="white-space: normal;">{{scope.row.customerName}}</div>
        </template>
      </el-table-column>
      <el-table-column
              align="center"
              label="负责人"
              min-width="100">
        <template slot-scope="scope">
            {{scope.row.userName}}
        </template>
      </el-table-column>
      <el-table-column
        label="修改申请时间"
        align="center"
        min-width="180">
        <template slot-scope="scope">
          {{scope.row.createdAt}}
        </template>
      </el-table-column>
      <el-table-column
              label="修改前客户内容"
              min-width="180">
        <template slot-scope="scope">
           <div>客户性质：{{scope.row.beforeCcdValue}}</div>
           <div>客户规模：{{scope.row.beforeNewScale}}</div>
           <div>规模性质：{{scope.row.beforeNewNature}}</div>
           <div>客户分类：{{scope.row.beforeCustomerNewType}}</div>
       </template>
     </el-table-column>
      <el-table-column
        label="修改后客户内容"
        min-width="180">
        <template slot-scope="scope">
          <div>客户性质：{{scope.row.afterCcdValue}}</div>
          <div>客户规模：{{scope.row.afterNewScale}}</div>
          <div>规模性质：{{scope.row.afterNewNature}}</div>
          <div>客户分类：{{scope.row.afterCustomerNewType}}</div>
        </template>
      </el-table-column>

      <el-table-column
        label="审核状态"
        align="center"
        min-width="180">
        <template slot-scope="scope">
          {{scope.row.applyState | fifapplyState}}
        </template>
      </el-table-column>

      <el-table-column
               width="100"
               fixed="right"
               label="操作"
               align="center">
         <template slot-scope="scope">
           <el-button
                   type="text"
                   size="mini"
                   v-if="scope.row.applyState==0 && checkEditCustomer && listQuery.type != 'my'"
                   @click="checkApply(scope.row,1)">通过
           </el-button>
           <el-button
             type="text"
             size="mini"
             v-if="scope.row.applyState==0 && checkEditCustomer && listQuery.type != 'my'"
             @click="checkApply(scope.row,2)">拒绝
           </el-button>
         </template>
      </el-table-column>
   </el-table>
  </div>

    <div class="pagination-container">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        layout="total, sizes,prev, pager, next,jumper"
        :current-page.sync="listQuery.pageNum"
        :page-size="listQuery.pageSize"
        :page-sizes="[10,15,20]"
        :total="count">
      </el-pagination>
    </div>



  </div>
</template>
<script>
import {
  partnerList,
  getCustomerOption,
  delCustomer,
} from '@/api/partner';
import {
  getReviewList,
  checkEditCustomer
} from '@/api/company';

import { mapGetters } from 'vuex';
import store from '@/store';

const defaultListQuery={
  pageNum: 1,
  pageSize: 10,
  "customerNumber": "", //客户编号
  "customerName": "", //客户名称
  "userId": "", //负责人ID
  "createTime": [], //申请时间
  "applyState": "", //审核状态，0-待审核，1-审核通过，2-拒绝
  "type": "", //my-我的客户，department-部门客户，all-全部客户
};
export default {
  name: "delList",
  props: {
    userOptionList:{//跟进状态
      type: Array,
      default:()=>[]
    },
  },
  data(){
    return {
      roles:store.getters.roles ? store.getters.roles : [],
      listQuery: JSON.parse(JSON.stringify(defaultListQuery)),
      dialogVisible3: false,
      btnLoading3: false,
      tableData: [],
      count: 0,
      listLoading: false,
      areaIndex1:null,
      areaIndex2: null,

    }
  },
  computed: {
    ...mapGetters([
      'name',
      'mobile',
      'userId'
    ]),
    checkEditCustomer(){
      if(this.roles.indexOf("checkEditCustomer") != -1){
        return true
      }else{
        return false
      }
    },
  },
  created() {

  },
  filters: {
    fifapplyState(val){
       if(val == 1){
         return '已审核'
       }else if(val == 2){
         return '已拒绝'
       }else if(val == 0){
         return '待审核'
       }
    },
  },
  components: {

  },
  methods: {
    //审核
    checkApply(item,type){
      let text = type == 1 ? '确认通过此次修改吗？':'确认拒绝此次修改吗？'
      this.$confirm(text, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let data = {};
        data.reviewId = item.reviewId;
        data.applyState = type;
        checkEditCustomer(data).then((res)=>{
          this.$message({
            type: 'success',
            message: '操作成功!'
          });
          this.getList();
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消操作'
        });
      });
    },

    handleSearchList(){
      this.listQuery.pageNum = 1;
      this.getList();
    },
    init(tab){
      this.listQuery.type = tab;
      this.getList();
    },
    toDetail(item){
      let routeData = this.$router.resolve({name:'customerDetail',query:{id:item.customerId}});
      window.open(routeData.href);
    },
    //客户名称输入匹配
    querySearch(queryString, cb){
      let data = {};
      data.keywords = queryString;
      getCustomerOption(data).then((res)=>{
        cb(res);
      })
    },
    //选择客户名称
    handleSelectCustomerName(item){
      this.listQuery.customerName = item.customerName
    },
    //获取列表
    getList() {
      this.listLoading = true;
      getReviewList(this.listQuery).then(response => {
        this.tableData = response.list;
        this.count = response.count;
        this.listLoading = false;
      }).catch(()=>{
        this.listLoading = false;
      });
    },
    handleSizeChange(val){
      this.listQuery.pageNum = 1;
      this.listQuery.pageSize = val;
      this.getList();
    },
    handleCurrentChange(val){
      this.listQuery.pageNum = val;
      this.getList();
    },
  },
}
</script>
<style scoped lang="scss">
.upload-div{
    text-align: center;
    position:relative;
    #upload{
      opacity: 0;
      position: absolute;
      z-index: 1;
      width:154px;
      height:40px
    }
  }
</style>



